<template>
<transition
  name="zoom-out"
  enter-active-class="transition-active"
  leave-active-class="transition-active">
  <div class="v-popup" v-show="isShow">
    <div class="v-des">
      <slot/>
    </div>
    <div class="v-btns">
      <div class="v-btn cancel" @click="cancel">取消</div>
      <div class="v-btn confirm" @click="confirm">确认</div>
    </div>
    <!-- <slot name="title" />
    <slot name="content" /> -->
  </div>
</transition>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    show (excu) {
      this.excu = excu
      this.isShow = true
    },
    close () {
      this.isShow = false
    },
    confirm () {
      this.excu(true)
    },
    cancel () {
      this.excu()
    }
  }
}
</script>

<style scoped>
.v-popup {
  width: 320px;
  /* box-sizing: border-box; */
  background-color: rgba(247, 247, 247, 0.95);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  /* padding: 24px 40px 32px; */

  /* width: 318px; */
  border-radius: 5px;
  font-size: 18px;
  .v-des {
    line-height: 30px;
    padding: 38px 50px 32px;
  }
  .v-btns {
    border-top: 1PX solid #ccc;
    display: flex;
    width: 100%;

    .v-btn {
      color: #007aff;
      padding: 20px 0;
      flex:1;
      text-align: center;
    }
    .cancel {
      border-right: 1PX solid #ccc;
    }
  }
}

.transition-active{
  transition: 0.3s cubic-bezier(.55,0,.1,1);
  transition-property:opacity,transform;
}
.zoom-out-enter {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.2);
}
.zoom-out-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

</style>
